<template>
	<view class="">
		<u-navbar title="详情" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="flex-col space-y-11 section_3">
		  <view class="section_3_3">
		    <text class="font_2">{{info.patentName}}</text>
			<view class="flex-col items-center text-wrapper"><text class="text_5">{{![0,1,2,'0','1','2'].includes(info.patentType) ? '发明' : ['发明','实用','外观'][info.patentType]}}</text></view>
		  </view>
		  
		</view>
		<view class="flex-col space-y-25 section_4">
		  <view class="flex-row">
		    <text class="font_3">专利号：</text>
		    <text class="font_4 text_6">{{info.patentNo || '-'}}</text>
		  </view>
		  <view class="flex-row">
		    <text class="font_3">案件状态：</text>
		    <text class="font_5">{{info.caseStatus || '-'}}</text>
		  </view>
		  <view class="flex-row">
		    <text class="font_3">近期应缴费：</text>
		    <text class="font_6 text_7">{{info.payCost || '0.00'}} 元</text>
		  </view>
		  <view class="flex-row">
		    <text class="font_3">监管日期：</text>
		    <text class="font_4 text_8">{{info.superviseTime || '-'}}</text>
		  </view>
		  <view class="flex-row">
		    <text class="font_3">申请日期：</text>
		    <text class="font_4 text_9">{{info.applyDate || '-'}}</text>
		  </view>
		  <view class="flex-row">
		    <text class="font_3">更新时间：</text>
		    <text class="font_4 text_10">{{info.updateTime || '-'}}</text>
		  </view>
		  <view class="flex-row space-x-35" v-if="info.unitPrice">
		    <view class="flex-row">
		      <text class="font_3">价格：</text>
		      <view class="group_4">
		        <text class="font_6 text_12">{{info.unitPrice}}元</text>
		        <text class="text_13">起</text>
		      </view>
		    </view>
		    <text class="font_3 text_11">可议价</text>
		  </view>
		</view>
		<view class="flex justify-center">
			<u-tabs :list="patentInfos" @click="tabChange" lineWidth="45"  :activeStyle="{
				color: '#5372fc'}"
			:inactiveStyle="{
				color: '#666'}"
			lineColor="#5372fc"
			></u-tabs>
		</view>
		<view class="content">
			<!-- <component :is="componment"></component> -->
			<law v-if="componment == 'law'" :patentLegalStatus="info.patentLegalStatus"></law>
			<change v-if="componment == 'change'" :changeList="info.changeList"></change>
			<descripation v-if="componment == 'descripation'" :info="saveRowData" ></descripation>
			<cost v-if="componment == 'cost'" :toPatentFee="info.toPatentFee" :alreadyPatentFee="info.alreadyPatentFee"></cost>
		</view>
		<view class="flex-row space-x-10 section_5" @click="openPop(true)" v-if="info.unitPrice">
		  <image
		    class="image_13"
		    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648545818782366453.png"
		  />
		  <text class="font_2">立即询价</text>
		</view>
		<u-popup :show="rightPop" mode="bottom" :closeOnClickOverlay="false" :closeable="true" @close="openPop(false)">
			<view class="flex-col space-y-53 section">
			  <text class="font_1 text">立即询价</text>
			  <view class="flex-col space-y-51">
			    <text class="button">157 5538 7045</text>
			    <view class="flex-row justify-center space-x-20 button_2">
			      <image
			        class="image"
			        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648535725988026642.png"
			      />
			      <text class="font_1 text_2">立即拨打电话</text>
			    </view>
			  </view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getNewPatentDetails,getPatentDetails} from '@/api/index.js';
	import descripation from '../../components/descripationInfos.vue';
	import change from '../../components/changeInfos.vue';
	import law from '../../components/lawInfos.vue';
	import cost from '../../components/costInfos.vue';
	export default {
		components:{descripation,change,law,cost},
		data() {
			return {
				info:{
					toPatentFee: [],
					alreadyPatentFee: [],
					patentLegalStatus: [],
					changeList: []
				},
				saveRowData:{},
				patentInfos:[
					{name:'著录信息'},
					{name:'费用信息'},
					{name:'法律信息'},
					{name:'变更历史'},
				],
				componment:'descripation',
				componmentInfos:{
					'著录信息':'descripation',
					'费用信息':'cost',
					'法律信息':'law',
					'变更历史':'change'
				},
				rightPop:false,
				patentNo:'',
				id:''
			};
		},
		onLoad(option) {
			this.patentNo = option.patentNo;
			this.id = option.id;
			this.getDetails();
		},
		methods:{
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			tabChange({index,name}){
				this.componment = this.componmentInfos[name]; 
			},
			getDetails() {
				if(this.patentNo) {
					getNewPatentDetails({patentNo:this.patentNo}).then(res => {
						if(res.code === 200) {
							this.info = res.data;
							this.info.toPatentFee = res.data.fee.filter(item => item.payFees != '已缴费');
							this.info.alreadyPatentFee = res.data.fee.filter(item => item.payFees == '已缴费');
							this.info.patentLegalStatus = res.data.legalInfo;
							this.info.changeList = res.data.changeInfo
							this.saveRowData = res.data.patentItem
						}
					});					
				}else if(this.id) {
					getPatentDetails({id:this.id}).then(res => {
						if(res.code === 200) {
							this.info = res.data;
							this.info.toPatentFee = res.data.fee.filter(item => item.payFees != '已缴费');
							this.info.alreadyPatentFee = res.data.fee.filter(item => item.payFees == '已缴费');
							this.info.patentLegalStatus = res.data.legalInfo;
							this.info.changeList = res.data.changeInfo
							this.saveRowData = res.data.patentItem
						}
					});	
				}
			},
			openPop(value){
				this.rightPop = value;
			},
		}
	}
</script>

<style lang="scss" scoped>
.space-y-11 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 11rpx;
  }
  .font_2 {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    line-height: 44rpx;
    color: #333333;
  }
  .text-wrapper {
	margin-top: 5px;
	margin-left: 10px;
    padding: 2rpx 0 4rpx;
    align-self: flex-start;
    background-color: #ffffff;
    border-radius: 4rpx;
    width: 70rpx;
    border: solid 1rpx #2f87f2;
    .text_5 {
      color: #2f87f2;
      font-size: 19rpx;
      font-family: Microsoft YaHei;
      line-height: 18rpx;
    }
  }
}
.section_3 {
  
  padding: 23rpx 29rpx 32rpx;
  background-color: #ffffff;
  .section_3_3 {
	  display: flex;
  }
}
.space-y-25 {
	border-bottom: 10rpx solid #fafafa;
	border-top: 10rpx solid #fafafa;
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 25rpx;
  }
  .font_3 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #777777;
  }
  .font_4 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 21rpx;
    color: #444444;
  }
  .text_6 {
    margin-top: 3rpx;
  }
  .font_5 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #444444;
  }
  .font_6 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 24rpx;
    color: #444444;
  }
  .text_7 {
    margin-top: 3rpx;
  }
  .text_8 {
    margin-top: 3rpx;
  }
  .text_9 {
    margin-top: 3rpx;
  }
  .text_10 {
    margin-top: 3rpx;
  }
  .space-x-35 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 35rpx;
    }
    .group_4 {
      margin-top: 4rpx;
      line-height: 24rpx;
      height: 24rpx;
      .text_12 {
        color: #ff7607;
      }
      .text_13 {
        color: #ff7607;
        font-size: 18rpx;
        font-family: Microsoft YaHei;
        line-height: 17rpx;
      }
    }
    .text_11 {
      color: #ff7607;
    }
  }
}
.section_4 {
  margin-top: 19rpx;
  padding: 29rpx 30rpx 37rpx;
  background-color: #ffffff;
}
.space-x-10 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
	margin-left: 10rpx;
  }
  .image_13 {
	flex-shrink: 0;
	width: 35rpx;
	height: 28rpx;
  }
  .font_2 {
	font-size: 28rpx;
	font-family: Microsoft YaHei;
	line-height: 28rpx;
	color: #ffffff;
  }
}
.section_5 {
  margin-right: 5rpx;
  padding: 16rpx 29rpx 15rpx 32rpx;
  background-color: #37c637;
  border-radius: 4rpx;
  height: 70rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  justify-content: center;
  align-items: center;
}
.space-y-53 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 53rpx;
  }
  .font_1 {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    line-height: 30rpx;
  }
  .text {
    align-self: center;
    color: #141414;
  }
  .space-y-51 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 51rpx;
    }
    .button {
      align-self: center;
      color: #58be6b;
      font-size: 40rpx;
      font-family: Microsoft YaHei;
      line-height: 40rpx;
    }
    .space-x-20 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 20rpx;
      }
      .image {
        width: 33rpx;
        height: 28rpx;
      }
      .text_2 {
        color: #ffffff;
      }
    }
    .button_2 {
      margin-right: 4rpx;
      padding: 29rpx 0;
      background-color: #37c637;
      border-radius: 4rpx;
    }
  }
}
.section {
  padding: 49rpx 18rpx 62rpx;
  background-color: #ffffff;
}
</style>